import { Link } from 'react-router-dom'
import { useScroll } from 'ahooks'
import { twMerge } from 'tailwind-merge'
import SubMenu from '../sub-menu'

const NavHeader = () => {
  const position = useScroll(document)
  const handleScrollToGameList = () => {
    const gameList = document.querySelector('#game-list')
    if (gameList) {
      gameList.scrollIntoView({ behavior: 'smooth' })
    }
  }

  return (
    <div className={twMerge("fixed top-0 left-0 right-0 z-50 duration-200 backdrop-blur-none", (position?.top || 0) > 10 && "bg-black/50 backdrop-blur-sm")}>
      <div className="sm:w-[1426px] mx-auto text-white pt-[16px] sm:pt-[32px] pb-[16px] sm:pb-[26px] px-[24px] sm:px-0">
        <div className="h-[40px] flex items-center">
          <Link className='block mr-[80px]' to='/home'><img src="/images/header_logo.png" className="h-[25px] sm:h-[33px]" alt="logo" /></Link>
          <ul className="hidden sm:flex items-center font-[AlimamaShuHeiTiBold] gap-[55px]">
            <li><Link to='/home'>HOME</Link></li>
            <li className='cursor-pointer' onClick={handleScrollToGameList}>GAME</li>
            <li><Link to='https://fate.global/' target='_blank' className='flex items-center gap-[5px]'>FATE APP <img src="/images/xinchuangkou.svg" className='size-[15px]' alt="" /></Link></li>
          </ul>
          <div className="hidden sm:flex size-[30px] sm:size-[40px] items-center justify-center cursor-pointer ml-auto mr-[10px] sm:mr-[20px]">
            <i className="size-[20px] sm:size-[24px] bg-[url(/images/header-search-icon.png)] bg-no-repeat bg-[length:100%]"></i>
          </div>
          <SubMenu />
          <button className="hidden sm:block w-[165px] h-[48px] bg-gradient-to-r from-[#15BFFD] to-[#9C37FD] to-50%">注册/登录</button>
        </div>
      </div>
    </div>
  )
}

export default NavHeader